<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./calender.js"></script>
  <script src="./utils.js"></script>
  <script src="https://unpkg.com/dayjs@1.11.7/dayjs.min.js"></script>
  <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
  <link rel="stylesheet" href="./app.css">
</head>

<body>
  <div id="app" v-cloak>
    <div class="calendarWrap">
      <h1 class="title">
        📅 {{dateShow}} {{gzDay}}日 {{gzDay[1]}}属{{五行}}
        <input type="date" class="dateIpt" :value="dateShow" @change="handleDateChange">
      </h1>
      <ol class="colorList">
        <li>大环境生你，办事易成：{{相生.颜色}}</li>
        <li>比肩兄弟帮，合作共赢：{{颜色}}</li>
        <li>你克大环境，能得收获：{{被克.颜色}}</li>
        <li>你生大环境，做事辛苦：{{被生.颜色}}</li>
        <li>大环境克你，事倍功半：{{相克.颜色}}</li>
      </ol>
      <div class="bottomBtn">
        <button @click="pre">前一天</button>
        <button @click="current">今天</button>
        <button @click="next">后一天</button>
      </div>
    </div>
  </div>
</body>
<script src="./app.js"></script>

</html>